import * as echarts from 'echarts'

export const Option1 = () => {
  //做环形图的本质是 radius: ['内半径', '外半径'] 内半径!=0
  let xData = ['2018', '2019', '2020', '2021', '2022', '2023']
  let legendData = [
    {
      name: '出生率',
      icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
    },
    {
      name: '死亡率',
      icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
    },
    {
      name: '老年率',
      icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
    },
    {
      name: '自然增长率',
      icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
    },
  ] //图例
  let firstIndustry = [72, 37, 4, 75, 65, 45] //第一产业
  let thirdIndustry = [8, 15, 34, 31, 45, 83] //第三产业
  let threeIndustry = [18, 26, 19, 68, 44, 35] //第三产业
  let fourIndustry = [2, 14, 25, 88, 26, 30] //第三产业

  const option = {
    grid: {
      top: '66px',
      left: '0px',
      bottom: '0px',
      right: '28px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 18,
      },
    },
    legend: {
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 40,
      top: '22px',
      data: legendData,
      //图例滚动
      // type: 'scroll',
      //图例文字样式
      textStyle: {
        color: 'rgba(162, 195, 215, 1)',
        fontSize: 17,
      },
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          show: false,
        },
        interval: 1,
        boundaryGap: false,

        axisLabel: {
          margin: 10,
          textStyle: {
            show: true,
            color: '#A9CBDF',
            fontSize: 17,
          },
        },

        axisLine: {
          lineStyle: {
            show: true,
            lineStyle: {
              color: 'rgba(169, 203, 223, 1)',
            },
          },
        },
        data: xData,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '(%)',
        nameTextStyle: {
          fontSize: 14,
          color: 'rgba(169, 203, 223, 1)',
        },
        min: 0,
        max: 100,
        interval: 20,
        splitNumber: 5,

        axisLabel: {
          formatter: function (value: string, index: number) {
            if (index === 0) {
              return value + '%'
            } else {
              return value
            }
          },
          color: '#A9CBDF',
        },

        //坐标轴线样式
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid', //solid实线;dashed虚线
            color: 'rgba(36, 173, 254, 0.2)',
            opacity: 0.8,
          },
        },
      },
    ],
    series: [
      {
        name: '出生率',
        data: firstIndustry,
        type: 'line',
        symbol: 'circle',
        symbolSize: 0.1,

        smooth: true, //true曲线; false折线
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(87, 182, 250,  0.5)' },
              { offset: 0.5, color: 'rgba(109, 161, 255, 0.5)' },
              { offset: 1, color: 'rgba(42, 137, 255, 0.3)' },
            ]), //改变折线点的颜色
          },
        },
      },
      {
        name: '死亡率',
        data: thirdIndustry,
        type: 'line',
        symbol: 'circle',
        symbolSize: 0.1,
        smooth: true, //true曲线; false折线
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 227, 97, 1)' },
              { offset: 0.5, color: 'rgba(255, 150, 26, 1)' },
            ]), //改变折线点的颜色
          },
        },
      },
      {
        name: '老年率',
        data: threeIndustry,
        type: 'line',
        symbol: 'circle',
        symbolSize: 0.1,
        smooth: true, //true曲线; false折线

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 255, 222, 1)' },
              { offset: 0.5, color: 'rgba(25, 200, 238, 1)' },
            ]), //改变折线点的颜色
          },
        },
      },
      {
        name: '自然增长率',
        data: fourIndustry,
        type: 'line',
        symbol: 'circle',
        symbolSize: 0.1,
        smooth: true, //true曲线; false折线
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 148, 147, 1)' },
              { offset: 0.5, color: 'rgba(255, 103, 76, 1)' },
            ]), //改变折线点的颜色
          },
        },
      },
    ],
  }
  return option
}

export const Option2 = () => {
  const data1 = [
    {
      name: '百岁以上',
      value: 23.4,
      sum: 30,
    },
    {
      name: '90-99岁',
      value: 16,
      sum: 20,
    },
    {
      name: '80-89岁',
      value: 15,
      sum: 20,
    },
    {
      name: '70-79岁',
      value: 40,
      sum: 20,
    },
    {
      name: '60-69岁',
      value: 28,
      sum: 20,
    },
    {
      name: '50-59岁',
      value: 62,
      sum: 20,
    },
  ]
  let colorLeft = ['rgba(152, 208, 255, 1)', 'rgba(37, 156, 255, 1)']
  let colorRight = ['rgba(255, 103, 76, 1)', 'rgba(255, 162, 161, 1)']
  let getArrByKey = (data: any[], k: string) => {
    let key = k || 'value'
    let res: any[] = []
    if (data) {
      data.forEach(function (t: { [x: string]: any }) {
        res.push(t[key])
      })
    }
    return res
  }
  const option = {
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 120,
      top: '12px',
      textStyle: {
        color: '#A9CBDF',
        fontSize: 17,
      },
      data: [
        {
          name: '男',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
        {
          name: '女',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
      ],
    },
    grid: [
      {
        show: false,
        left: '6%',
        top: '10%',
        bottom: '0%',
        width: '30%',
      },
      {
        show: false,
        left: '51%',
        top: '10%',
        bottom: '-1%',
        width: '30%',
      },
      {
        show: false,
        right: '10%',
        top: '10%',
        bottom: '0%',
        width: '30%',
      },
    ],
    tooltip: {
      show: true,
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },
    xAxis: [
      {
        type: 'value',
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        position: 'bottom',
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        show: false,
      },
      {
        gridIndex: 2,
        show: false,
        type: 'value',
        inverse: false,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        position: 'bottom',
        axisLabel: {
          show: true,
          textStyle: {
            color: 'white',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data1, 'name'),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
      {
        gridIndex: 1,
        type: 'category',
        inverse: true,
        position: 'left',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 0,
          align: 'auto',
          verticalAlign: 'middle',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            align: 'center',
          },
        },
        data: getArrByKey(data1, 'name'),
      },
      {
        gridIndex: 2,
        triggerEvent: true,
        show: true,
        inverse: true,
        data: getArrByKey(data1, 'name'),
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: 'pictorialBar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        // symbol: 'rect',
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)',
          },
        },
        barWidth: 20,
        // symbolRepeat: true,
        // symbolSize: 14,
        data: [23.4, 16, 15, 10],
        barGap: '-100%',
        barCategoryGap: 0,
        label: {
          normal: {
            show: false,
            // formatter: (series) => {
            //   return lastYearData[timeLineData[0]][series.dataIndex] + "%";
            // },
            position: 'insideTopLeft',
            textStyle: {
              color: '#ffffff',
              fontSize: 17,
            },
            offset: [0, -10],
          },
        },
        z: -100,
        animationEasing: 'elasticOut',
        animationDelay: function (dataIndex: any, params: { index: number }) {
          return params.index * 30
        },
      },
      {
        name: '男',
        type: 'bar',
        gridIndex: 0,
        // showBackground: true,
        backgroundStyle: {
          barBorderRadius: 15,
        },
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: data1,
        barWidth: 20,
        // barCategoryGap: '40%',
        itemStyle: {
          normal: {
            show: true,
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
            // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: colorLeft[0], //指0%处的颜色
                },
                {
                  offset: 1,
                  color: colorLeft[1], //指100%处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [10, 0, 0, 10],
          },
        },

        label: {
          normal: {
            show: false,
            position: 'insideRight',
            textStyle: {
              color: '#ffffff',
              fontSize: 17,
            },
          },
        },
      },
      {
        type: 'pictorialBar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        symbol: 'rect',
        itemStyle: {
          normal: {
            color: 'rgba(0,0,0,0)',
          },
        },
        barWidth: 10,
        symbolRepeat: true,
        symbolSize: 14,
        data: [23.4, 16, 15, 50],
        barGap: '-100%',
        barCategoryGap: 0,
        label: {
          normal: {
            show: false,
            // formatter: (series) => {
            //   return thisYearData[timeLineData[0]][series.dataIndex] + "%";
            // },
            position: 'insideTopRight',
            textStyle: {
              color: '#ffffff',
              fontSize: 17,
            },
            offset: [0, -10],
          },
        },
        z: -100,
        animationEasing: 'elasticOut',
        animationDelay: function (dataIndex: any, params: { index: number }) {
          return params.index * 30
        },
      },
      {
        name: '女',
        type: 'bar',
        xAxisIndex: 2,
        yAxisIndex: 2,
        gridIndex: 2,
        showBackground: false,
        backgroundStyle: {
          barBorderRadius: 10,
        },
        data: [23.4, 16, 15, 40, 22, 18],
        barWidth: 20,
        // barCategoryGap: '40%',
        itemStyle: {
          normal: {
            show: true,
            // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。
            // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: colorRight[0], //指0%处的颜色
                },
                {
                  offset: 1,
                  color: colorRight[1], //指100%处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [0, 10, 10, 0],
          },
        },
        label: {
          normal: {
            show: false,
            position: 'insideLeft',
            textStyle: {
              color: '#ffffff',
              fontSize: 17,
            },
          },
        },
      },
    ],
  }

  return option
}
export const Option3 = () => {
  const option = {
    grid: {
      top: '50px',
      left: '0%',
      bottom: '10px',
      right: '0%',
      containLabel: true,
    },
    tooltip: {
      show: true,
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },
    xAxis: {
      data: ['2018', '2019', '2020', '2021', '2022', '2023'],
      axisLine: {
        lineStyle: {
          color: 'transparent', //底部边框颜色
        },
      },
      axisLabel: {
        textStyle: {
          color: 'rgba(169, 203, 223, 1)', //底部文字颜色
          fontSize: 17,
        },
      },
    },
    yAxis: [
      {
        type: 'value',
        name: '(万元)',
        nameTextStyle: {
          fontSize: 14,
          color: 'rgba(169, 203, 223, 1)',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(135,157,179,1)',
          },
        },

        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: 'rgba(135,157,179,.1)',
            opacity: 0.1,
          },
        },
        axisLabel: {
          color: '#A4D5FF',
          fontSize: 17,
        },
      },
    ],
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: '55%',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(21,136,209,0.1)',
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0.8, 1, [
              {
                offset: 0,
                // color: '#00FFE3',//渐变1
                color: 'rgba(152, 208, 255, 1)', //渐变1
              },
              {
                offset: 1,
                // color: '#4693EC',//渐变2
                color: 'rgba(37, 156, 255, 1)', //渐变2
              },
              {
                offset: 0.8,
                // color: '#4693EC',//渐变2
                color: 'rgba(22, 101, 177, 1)', //渐变2
              },
            ]),
          },
        },
        data: [20, 80, 100, 40, 34, 90],
        z: 0,
        zlevel: 0,
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: 'rgba(20, 44, 81, .6)',
          },
        },
        symbolRepeat: 'fixed',
        symbolMargin: 6,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [55, 4],
        symbolPosition: 'start',
        symbolOffset: [0, -1],
        // symbolBoundingData: this.total,
        data: [20, 80, 100, 40, 34, 90],
        width: '25%',
        z: 0,
        zlevel: 1,
      },
    ],
  }
  return option
}
export const Option4 = () => {
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: '#02090d',
      borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: 'rgba(17, 27, 54, 1)',
        },
      },
      y: 'center',
      textStyle: {
        color: '#879DB3',
        fontSize: 17,
      },
    },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 120,
      top: '22px',
      textStyle: {
        color: '#A9CBDF',
        fontSize: 17,
      },
      data: [
        {
          name: '企业数量',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
        {
          name: '新注册',
          icon: 'path://M512 992a480 480 0 1 1 480-480 480 480 0 0 1-480 480z m0-799.968A319.968 319.968 0 1 0 831.68000001 512 319.968 319.968 0 0 0 512 192.032z',
        },
      ],
    },
    grid: {
      top: '66px',
      left: '0px',
      bottom: '0px',
      right: '28px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['2017', '2018', '2019', '2020', '2022', '2023'],
      axisTick: {
        show: false,
      },
      interval: 1,
      axisLabel: {
        margin: 10,
        textStyle: {
          show: true,
          color: '#A9CBDF',
          fontSize: 17,
        },
      },
      axisLine: {
        lineStyle: {
          show: true,
          lineStyle: {
            color: 'rgba(169, 203, 223, 1)',
          },
        },
      },
    },
    yAxis: {
      type: 'value',
      //坐标轴线样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid', //solid实线;dashed虚线
          color: '#879DB3',
          opacity: 0.2,
          fontSize: 17,
        },
      },
      axisLabel: {
        formatter: '{value} ',
        color: '#A9CBDF',
        fontSize: 17,
      },
    },
    series: [
      {
        name: '企业数量',
        type: 'bar',
        stack: 'total',

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 1, color: 'rgba(0, 255, 222, 1)' },
              { offset: 0, color: 'rgba(96, 132, 255, 0)' },
            ]), //改变折线点的颜色
            borderRadius: 10,
          },
        },
        barWidth: '22%',
        emphasis: {
          focus: 'series',
        },
        data: [120, 132, 101, 134, 90, 230, 210, 302, 301, 334, 390, 330],
      },
      {
        name: '新注册',
        type: 'bar',
        stack: 'total',

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(152, 208, 255, 1)' },
              { offset: 0.8, color: 'rgba(37, 156, 255, 0.5)' },

              { offset: 1, color: 'rgba(22, 101, 177, 0)' },
            ]), //改变折线点的颜色
            borderRadius: 10,
          },
        },
        barWidth: '22%',
        emphasis: {
          focus: 'series',
        },
        data: [320, 80, 301, 334, 390, 330, 320, 390, 330, 320, 390, 390],
      },
    ],
  }

  return option
}
export const Option5 = () => {
  // 格式化百分比
  const formatPercent = (num: number) => {
    if (num.toString().indexOf('.') > -1) {
      let arr = num.toString().split('.')
      let decimalArr = arr[1].split('')
      if (decimalArr.length > 2) {
        return num.toFixed(2)
      } else {
        return num
      }
    } else {
      return num
    }
  }
  const value = 80
  const total = 100
  const color = ['#38F0FF', 'rgba(36, 150, 255, 0.8)'] //渐变色列表
  const point = value //在线
  const handred = total //全部
  const option = {
    // 标题
    title: {
      text:
        '{a|' + formatPercent((point * 100) / handred) + '}{b|%}\n{c|社保缴纳}',
      x: '15%',
      y: '37%',
      textStyle: {
        rich: {
          a: {
            color: '#FFFFFF',
            fontSize: 32,
            fontFamily: 'DIN',
            fontWeight: 'bold',
            padding: [0, 0, 0, 65],
          },
          b: {
            fontSize: 32,
            fontFamily: 'DIN',
            color: '#FFFFFF',
            fontWeight: 'bold',

            padding: [20, 0, 15, 6],
          },
          c: {
            fontSize: 20,
            fontFamily: 'SourceHanSansCN-Normal',
            color: 'rgba(169, 203, 223, 1)',
            padding: [3, 0, 16, 60],
          },
        },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        hoverAnimation: false,
        clockWise: true,
        radius: ['66%', '74%'],
        center: ['50%', '55%'],

        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        data: [
          {
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: {
                  // 颜色渐变
                  type: 'linear',
                  x: 0,
                  y: 0.2,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: color[0], // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: color[1], // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(129, 202, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },

          {
            // 剩余背景透明
            name: '剩余',
            z: 1,
            value: handred - point || 1,
            itemStyle: {
              normal: {
                color: 'rgba(0, 0, 0, 0)',
              },
            },
          },
        ],
      },
      ,
      {
        name: '内部圆背景',
        type: 'pie',
        radius: ['0%', '52%'], // 设置饼图的内半径和外半径，实现环形效果
        center: ['50%', '55%'],
        hoverAnimation: false,
        legendHoverLink: false,
        color: new echarts.graphic.LinearGradient(
          1,
          1,
          0,
          1,
          [
            { offset: 1, color: 'rgba(11, 22, 36, 0)' },
            { offset: 0, color: 'rgba(46, 86, 138, 1)' },
          ],
          false
        ),
        itemStyle: {},
        label: {
          show: false, // 不显示标签
        },
        data: [{ value: 1, name: '内部圆背景' }],
      },
      {
        // 亮线
        name: '',
        z: 5,
        type: 'pie',
        cursor: 'default',
        radius: ['50%', '50%'],
        hoverAnimation: false,
        legendHoverLink: false,
        center: ['50%', '55%'],
        startAngle: 180,

        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 1,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(169, 203, 223, 1)',
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(169, 203, 223, 0)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
          },
        ],
      },
    ],
  }

  return option
}
export const Option6 = () => {
  // 格式化百分比
  const formatPercent = (num: number) => {
    if (num.toString().indexOf('.') > -1) {
      let arr = num.toString().split('.')
      let decimalArr = arr[1].split('')
      if (decimalArr.length > 2) {
        return num.toFixed(2)
      } else {
        return num
      }
    } else {
      return num
    }
  }
  const value = 80
  const total = 100
  const color = ['rgba(255, 245, 139, 1)', 'rgba(252, 172, 0, 1)'] //渐变色列表
  const point = value //在线
  const handred = total //全部
  const option = {
    // 标题
    title: {
      text:
        '{a|' +
        formatPercent((point * 100) / handred) +
        '}{b|%}\n{c|公积金缴纳}',
      x: '15%',
      y: '37%',
      textStyle: {
        rich: {
          a: {
            color: 'rgba(255, 245, 139, 1)',
            fontSize: 32,
            fontFamily: 'DIN',
            fontWeight: 'bold',
            padding: [0, 0, 0, 65],
          },
          b: {
            fontSize: 32,
            fontFamily: 'DIN',
            color: 'rgba(255, 245, 139, 1)',
            fontWeight: 'bold',

            padding: [20, 0, 15, 6],
          },
          c: {
            fontSize: 20,
            fontFamily: 'SourceHanSansCN-Normal',
            color: 'rgba(169, 203, 223, 1)',
            padding: [3, 0, 16, 50],
          },
        },
      },
    },
    series: [
      {
        name: '',
        type: 'pie',
        hoverAnimation: false,
        clockWise: true,
        radius: ['66%', '74%'],
        center: ['50%', '55%'],

        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
        data: [
          {
            value: point,
            name: '占比',
            itemStyle: {
              normal: {
                color: {
                  // 颜色渐变
                  type: 'linear',
                  x: 0,
                  y: 0.2,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: color[0], // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: color[1], // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(129, 202, 255, 1)', // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
          },

          {
            // 剩余背景透明
            name: '剩余',
            z: 1,
            value: handred - point || 1,
            itemStyle: {
              normal: {
                color: 'rgba(0, 0, 0, 0)',
              },
            },
          },
        ],
      },
      ,
      {
        name: '内部圆背景',
        type: 'pie',
        radius: ['0%', '52%'], // 设置饼图的内半径和外半径，实现环形效果
        center: ['50%', '55%'],
        hoverAnimation: false,
        legendHoverLink: false,
        color: new echarts.graphic.LinearGradient(
          1,
          1,
          0,
          1,
          [
            { offset: 1, color: 'rgba(11, 22, 36, 0)' },
            { offset: 0, color: 'rgba(46, 86, 138, 1)' },
          ],
          false
        ),
        itemStyle: {},
        label: {
          show: false, // 不显示标签
        },
        data: [{ value: 1, name: '内部圆背景' }],
      },
      {
        // 亮线
        name: '',
        z: 5,
        type: 'pie',
        cursor: 'default',
        radius: ['50%', '50%'],
        hoverAnimation: false,
        legendHoverLink: false,
        center: ['50%', '55%'],
        startAngle: 180,

        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 1,
            itemStyle: {
              normal: {
                borderWidth: 5,
                borderColor: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(169, 203, 223, 1)',
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(169, 203, 223, 0)',
                    },
                  ],
                  globalCoord: false,
                },
              },
            },
          },
        ],
      },
    ],
  }

  return option
}
export const Option7 = () => {
  const option = {
    title: {
      text: '设备在线率',
      x: 'center',
      y: '80%',
      textStyle: {
        color: 'rgba(169, 203, 223, 1)',
        fontSize: 22,
        fontWeight: '400',
      },
    },

    series: [
      {
        tooltip: {
          show: true,
          backgroundColor: '#02090d',
          borderColor: 'rgba(0, 243, 230, 0.4)', // 边框颜色
          axisPointer: {
            type: 'shadow',
            label: {
              backgroundColor: 'rgba(17, 27, 54, 1)',
            },
          },
          y: 'center',
          textStyle: {
            color: '#879DB3',
            fontSize: 22,
          },
        },
        type: 'gauge',
        radius: '100%',
        center: ['center', '75%'],
        startAngle: 180,
        endAngle: 0,
        detail: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 22,
            color: [
              ['0.75', 'rgba(26, 128, 254, 1)'],
              [1, 'rgba(83, 100, 114, 1)'],
            ],
          },
        },

        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'gauge',
        radius: '90%',
        min: 0,
        max: 100,
        center: ['center', '75%'],
        data: [
          {
            value: 75,
          },
        ],
        splitNumber: 10,
        startAngle: 180,
        endAngle: 0,
        title: {
          offsetCenter: ['0', '-60%'],
          fontSize: 40,
        },
        detail: {
          formatter: function (value: any) {
            return value + '%'
          },
          fontSize: 35,
          color: '#fff',
          offsetCenter: ['0%', '-40%'],
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(162, 195, 215, 1)',
          fontSize: 22,
          distance: -70,
        },
        axisTick: {
          splitNumber: 3,
          show: true,
          lineStyle: {
            color: 'rgba(83, 100, 114, 1)',
            width: 4,
          },
          length: -30,
        },
        splitLine: {
          show: true,
          length: -10,
          lineStyle: {
            fontSize: 20,
            color: '#ccc',
            width: 2,
          },
        },

        itemStyle: {
          normal: {
            color: '#fff',
          },
        },
        pointer: {
          width: 10,
          length: '80%',
        },
      },
    ],
  }

  return option
}
